import globalStyles from '@/common/styles/globalStyles'
import React from 'react'
import { Image, StyleSheet, Text, View } from 'react-native'
import { LinearGradient } from 'expo-linear-gradient';

export default function SceneFooter(props:{title:string ,  points:number | string}) {
    let { title , points } = props
    return (
        <View style={styles.container}>
            <LinearGradient
                colors={['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0.6)']}
                style={styles.gradient}
                start={{ x: 0.5, y: 0 }}
                end={{ x: 0.5, y: 1 }}
            >
                <View style={[globalStyles.rowLine,globalStyles.aiCenter , globalStyles.jcSB , styles.paddingLayout]} >
                    <View  >
                        <Text style={styles.titleText}> {title} </Text>
                    </View>
                    <View style={[ styles.buttonContainer ]}>
                        <View style={{ width: '100%', height: '100%' }}>
                            <Image  style={{ width: '100%', height: '100%' }} source={require('@/assets/home/button_bp.png')} />
                        </View>
                        <View style={[globalStyles.rowLine,globalStyles.aiCenter , globalStyles.jcCenter , styles.buttonBox]}>
                            <Image style={{ width: 16, height: 16 }} source={require('@/assets/home/star.png')} />
                            <Text style={styles.buttonText}> {points} </Text>
                            <Text style={styles.buttonText}> 开始 </Text>
                        </View>
                    </View>
                </View>
            </LinearGradient>
        </View>
    )
}
const styles = StyleSheet.create({
    container:{
        position:'absolute',
        bottom:0,
        left:0,
        width: '100%',
    },
    titleText:{
        fontWeight:'bold',
        color:"#fff",
        fontSize:12,
    },
    buttonText:{
        color:"#fff",
        fontSize:12,
    },
    buttonContainer:{
        minWidth:92 , 
        height:40
    },
    buttonBox:{
        position:"absolute" , 
        top:0 , 
        left:'10%' ,
        width: '80%', 
        height: '100%' ,
    },
    gradient: {
        width: '100%',
        height: '100%',
        borderRadius:16
    },
    paddingLayout:{
        paddingBottom:6,
        paddingVertical:3
    }
})